<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John Conway's - Game of Life</title>

    <!-- style and fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&family=Raleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./../assets/css/gameOfLIfe_css/gameOfLife.min.css">

</head>

<body>
    <header>Game Of Life</header>
    <div class="container">
        <canvas id="canvas"></canvas>
    </div>
    <div class="tab" id="game-info">
        <div class="title">
            <div class="name">John Conway's</div>
            <div class="game">Game of Life</div>
        </div>
        <div class="para">
            <div class="heading">
                What does it mean?
            </div>
            <p>The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician
                John Horton Conway in 1970. <br>
                It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no
                further input. One interacts with the Game of Life by creating an initial configuration and observing
                how it evolves. </p>
        </div>
        <div class="para">
            <div class="heading">Rules:</div>
            <p>
            <ol>
                <li>Each cell with one or no neighbors dies, as if by solitude.</li>
                <li>Each cell with four or more neighbors dies, as if by overpopulation.</li>
                <li>Each cell with two or three neighbors survives.</li>
                <li>Each cell with three neighbors becomes populated.</li>
            </ol>
            </p>
        </div>
        <div class="para">
            <div class="heading">Controls : </div>
            <p>
            <ul>
                <li>Use space bar to Play or Pause.</li>
                <li>Use right arrow key ➡ move the game one step at a time.</li>
                <li>Click on any box to make it alive <i>(Even while the game is on)</i>.</li>
            </ul>
            </p>
        </div>
        <div class="para">
            <div class="heading">Credit : </div>
            <p>
            <ul>
                <li>Know more about
                    <a href="https://en.wikipedia.org/wiki/John_Horton_Conway" target="_blank">
                        John Conway
                    </a>
                </li>
                <li>Implemented by <a href="https://jhamadhav.com" target="_blank">Madhav Jha</a> for <a
                        href="https://www.girlscript.tech/Home" target="_blank">Girlscript</a></li>
            </ul>
            </p>
        </div>
    </div>
    <div class="tab" id="preloaded-patterns">

        <div class="title">
            <div class="name">Preloaded</div>
            <div class="game">GOL Patterns</div>
        </div>
        <ol>
            <li class="para">
                <div class="heading">
                    blinker
                </div>
                <img src="./../assets/Images/gameOfLife/patterns/blinker.png" alt="Bliker" class="pattern">
            </li>
            <li class="para">
                <div class="heading">
                    Beacon
                </div>
                <img src="./../assets/Images/gameOfLife/patterns/beacon.png" alt="Beacon" class="pattern">
            </li>
            <li class="para">
                <div class="heading">
                    gosper glider
                </div>
                <img src="./../assets/Images/gameOfLife/patterns/gosper.png" alt="gosper glider" class="pattern">
            </li>
            <li class="para">
                <div class="heading">
                    ants
                </div>
                <img src="./../assets/Images/gameOfLife/patterns/ants.png" alt="ants" class="pattern">
            </li>

        </ol>
    </div>
    <div id="control-panel">
        <svg id="info" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <title>More info</title>
            <path
                d="M19.9667 13.1667C20.8258 13.1667 21.5222 12.4702 21.5222 11.6111C21.5222 10.752 20.8258 10.0555 19.9667 10.0555C19.1075 10.0555 18.4111 10.752 18.4111 11.6111C18.4111 12.4702 19.1075 13.1667 19.9667 13.1667Z"
                fill="black" />
            <path
                d="M23.3333 27.7778H21.1111V15.6667H17.7778C17.4831 15.6667 17.2005 15.7837 16.9921 15.9921C16.7837 16.2005 16.6667 16.4831 16.6667 16.7778C16.6667 17.0725 16.7837 17.3551 16.9921 17.5635C17.2005 17.7718 17.4831 17.8889 17.7778 17.8889H18.8889V27.7778H16.6667C16.372 27.7778 16.0894 27.8949 15.881 28.1032C15.6726 28.3116 15.5555 28.5942 15.5555 28.8889C15.5555 29.1836 15.6726 29.4662 15.881 29.6746C16.0894 29.883 16.372 30 16.6667 30H23.3333C23.628 30 23.9106 29.883 24.119 29.6746C24.3274 29.4662 24.4444 29.1836 24.4444 28.8889C24.4444 28.5942 24.3274 28.3116 24.119 28.1032C23.9106 27.8949 23.628 27.7778 23.3333 27.7778Z"
                fill="black" />
            <path
                d="M20 37.7778C16.4839 37.7778 13.0467 36.7351 10.1232 34.7817C7.19964 32.8283 4.92102 30.0517 3.57546 26.8033C2.2299 23.5548 1.87784 19.9803 2.5638 16.5317C3.24976 13.0832 4.94293 9.91549 7.4292 7.42923C9.91546 4.94296 13.0832 3.24979 16.5317 2.56383C19.9803 1.87787 23.5548 2.22993 26.8032 3.57549C30.0517 4.92105 32.8282 7.19967 34.7817 10.1232C36.7351 13.0468 37.7778 16.4839 37.7778 20C37.7778 24.715 35.9048 29.2368 32.5708 32.5708C29.2368 35.9048 24.7149 37.7778 20 37.7778V37.7778ZM20 4.44446C16.9234 4.44446 13.9159 5.35678 11.3578 7.06604C8.79968 8.77531 6.80589 11.2048 5.62853 14.0472C4.45116 16.8896 4.14311 20.0173 4.74332 23.0348C5.34354 26.0522 6.82506 28.824 9.00055 30.9995C11.176 33.1749 13.9478 34.6565 16.9652 35.2567C19.9827 35.8569 23.1104 35.5488 25.9528 34.3715C28.7952 33.1941 31.2247 31.2003 32.934 28.6422C34.6432 26.0841 35.5555 23.0766 35.5555 20C35.5555 15.8744 33.9167 11.9178 30.9994 9.00058C28.0822 6.08334 24.1256 4.44446 20 4.44446V4.44446Z"
                fill="black" />
        </svg>

        <svg id="bookmark" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <title>See preloaded patterns</title>
            <path fill-rule="evenodd" clip-rule="evenodd"
                d="M27.135 12.865C27.2514 12.9811 27.3438 13.119 27.4068 13.2709C27.4698 13.4228 27.5022 13.5856 27.5022 13.75C27.5022 13.9144 27.4698 14.0772 27.4068 14.2291C27.3438 14.3809 27.2514 14.5189 27.135 14.635L19.635 22.135C19.5189 22.2514 19.3809 22.3437 19.2291 22.4068C19.0772 22.4698 18.9144 22.5022 18.75 22.5022C18.5856 22.5022 18.4228 22.4698 18.2709 22.4068C18.119 22.3437 17.9811 22.2514 17.865 22.135L14.115 18.385C13.9988 18.2688 13.9066 18.1308 13.8437 17.9789C13.7808 17.8271 13.7484 17.6643 13.7484 17.5C13.7484 17.3356 13.7808 17.1729 13.8437 17.021C13.9066 16.8692 13.9988 16.7312 14.115 16.615C14.2312 16.4988 14.3692 16.4066 14.521 16.3437C14.6729 16.2808 14.8356 16.2484 15 16.2484C15.1644 16.2484 15.3271 16.2808 15.479 16.3437C15.6308 16.4066 15.7688 16.4988 15.885 16.615L18.75 19.4825L25.365 12.865C25.4811 12.7486 25.619 12.6562 25.7709 12.5932C25.9228 12.5302 26.0856 12.4977 26.25 12.4977C26.4144 12.4977 26.5772 12.5302 26.7291 12.5932C26.8809 12.6562 27.0189 12.7486 27.135 12.865V12.865Z"
                fill="black" />
            <path
                d="M5 5C5 3.67392 5.52678 2.40215 6.46447 1.46447C7.40215 0.526784 8.67392 0 10 0L30 0C31.3261 0 32.5979 0.526784 33.5355 1.46447C34.4732 2.40215 35 3.67392 35 5V38.75C34.9999 38.9761 34.9384 39.1979 34.8222 39.3919C34.706 39.5858 34.5393 39.7446 34.34 39.8514C34.1407 39.9581 33.9161 40.0087 33.6903 39.9979C33.4644 39.9871 33.2457 39.9153 33.0575 39.79L20 32.7525L6.9425 39.79C6.75426 39.9153 6.53558 39.9871 6.30973 39.9979C6.08388 40.0087 5.85933 39.9581 5.66 39.8514C5.46066 39.7446 5.29401 39.5858 5.17779 39.3919C5.06156 39.1979 5.00012 38.9761 5 38.75V5ZM10 2.5C9.33696 2.5 8.70107 2.76339 8.23223 3.23223C7.76339 3.70107 7.5 4.33696 7.5 5V36.415L19.3075 30.21C19.5127 30.0735 19.7536 30.0006 20 30.0006C20.2464 30.0006 20.4873 30.0735 20.6925 30.21L32.5 36.415V5C32.5 4.33696 32.2366 3.70107 31.7678 3.23223C31.2989 2.76339 30.663 2.5 30 2.5H10Z"
                fill="black" />
        </svg>

        <svg id="play" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <title>Start</title>
            <path
                d="M34.44 17.374C34.9105 17.6324 35.3029 18.0124 35.5762 18.4744C35.8495 18.9363 35.9937 19.4632 35.9937 20C35.9937 20.5368 35.8495 21.0637 35.5762 21.5256C35.3029 21.9876 34.9105 22.3676 34.44 22.626L14.446 33.624C13.9894 33.8752 13.4752 34.0031 12.9541 33.9951C12.4331 33.9872 11.923 33.8436 11.4743 33.5786C11.0256 33.3135 10.6537 32.9362 10.3951 32.4837C10.1366 32.0312 10.0004 31.5191 10 30.998V9.002C10.0004 8.48086 10.1366 7.96882 10.3951 7.51632C10.6537 7.06382 11.0256 6.68647 11.4743 6.42144C11.923 6.1564 12.4331 6.01283 12.9541 6.00487C13.4752 5.9969 13.9894 6.12481 14.446 6.376L34.44 17.374V17.374ZM33.476 20.874C33.6323 20.7875 33.7626 20.6608 33.8533 20.5069C33.944 20.353 33.9919 20.1776 33.9919 19.999C33.9919 19.8204 33.944 19.645 33.8533 19.4911C33.7626 19.3372 33.6323 19.2105 33.476 19.124L13.482 8.126C13.3297 8.04225 13.1583 7.99961 12.9845 8.00229C12.8108 8.00498 12.6407 8.0529 12.4912 8.14132C12.3416 8.22974 12.2176 8.35562 12.1315 8.50654C12.0453 8.65747 12 8.82823 12 9.002V30.998C12 31.1718 12.0453 31.3425 12.1315 31.4935C12.2176 31.6444 12.3416 31.7703 12.4912 31.8587C12.6407 31.9471 12.8108 31.995 12.9845 31.9977C13.1583 32.0004 13.3297 31.9578 13.482 31.874L33.476 20.874Z"
                fill="black" />
        </svg>
        <svg id="pause" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <title>Pause</title>
            <path
                d="M15 8.75C15.3315 8.75 15.6495 8.8817 15.8839 9.11612C16.1183 9.35054 16.25 9.66848 16.25 10V30C16.25 30.3315 16.1183 30.6495 15.8839 30.8839C15.6495 31.1183 15.3315 31.25 15 31.25C14.6685 31.25 14.3505 31.1183 14.1161 30.8839C13.8817 30.6495 13.75 30.3315 13.75 30V10C13.75 9.66848 13.8817 9.35054 14.1161 9.11612C14.3505 8.8817 14.6685 8.75 15 8.75ZM25 8.75C25.3315 8.75 25.6495 8.8817 25.8839 9.11612C26.1183 9.35054 26.25 9.66848 26.25 10V30C26.25 30.3315 26.1183 30.6495 25.8839 30.8839C25.6495 31.1183 25.3315 31.25 25 31.25C24.6685 31.25 24.3505 31.1183 24.1161 30.8839C23.8817 30.6495 23.75 30.3315 23.75 30V10C23.75 9.66848 23.8817 9.35054 24.1161 9.11612C24.3505 8.8817 24.6685 8.75 25 8.75Z"
                fill="black" />
        </svg>

        <svg id="forward" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <title>Move by 1 step</title>
            <path
                d="M2.5 11.3688V28.6344C2.5 29.6719 3.51562 30.3313 4.34609 29.8336L19.1016 21.0055C19.8234 20.5735 19.8234 19.4375 19.1016 19.0055L4.34609 10.1774C3.51562 9.6719 2.5 10.3313 2.5 11.3688Z"
                stroke="black" stroke-width="2.5" stroke-miterlimit="10" />
            <path
                d="M20.357 11.3688V28.6344C20.357 29.6719 21.3727 30.3313 22.2031 29.8336L36.9586 21.0055C37.6805 20.5735 37.6805 19.4375 36.9586 19.0055L22.2031 10.1774C21.3719 9.6719 20.357 10.3313 20.357 11.3688Z"
                stroke="black" stroke-width="2.5" stroke-miterlimit="10" />
        </svg>

        <svg width="40" height="40" viewBox="0 0 40 40" id="setting" fill="none" xmlns="http://www.w3.org/2000/svg">
            <title>Settings</title>
            <path
                d="M13.3333 13.7445C13.3375 12.7559 13.012 11.7942 12.4083 11.0114C11.8046 10.2286 10.9572 9.66937 10 9.42224V5.55557C10 5.26088 9.88294 4.97827 9.67456 4.7699C9.46619 4.56152 9.18357 4.44446 8.88889 4.44446C8.5942 4.44446 8.31159 4.56152 8.10322 4.7699C7.89484 4.97827 7.77778 5.26088 7.77778 5.55557V9.42224C6.80651 9.65484 5.9419 10.2078 5.32337 10.992C4.70485 11.7761 4.36846 12.7457 4.36846 13.7445C4.36846 14.7432 4.70485 15.7128 5.32337 16.497C5.9419 17.2811 6.80651 17.8341 7.77778 18.0667V34.4445C7.77778 34.7391 7.89484 35.0218 8.10322 35.2301C8.31159 35.4385 8.5942 35.5556 8.88889 35.5556C9.18357 35.5556 9.46619 35.4385 9.67456 35.2301C9.88294 35.0218 10 34.7391 10 34.4445V18.0667C10.9572 17.8196 11.8046 17.2604 12.4083 16.4776C13.012 15.6947 13.3375 14.733 13.3333 13.7445ZM8.88889 15.9667C8.44938 15.9667 8.01973 15.8363 7.65429 15.5922C7.28885 15.348 7.00402 15.0009 6.83582 14.5949C6.66763 14.1888 6.62362 13.742 6.70937 13.3109C6.79511 12.8799 7.00676 12.4839 7.31754 12.1731C7.62832 11.8623 8.02429 11.6507 8.45536 11.5649C8.88642 11.4792 9.33324 11.5232 9.7393 11.6914C10.1454 11.8596 10.4924 12.1444 10.7366 12.5099C10.9808 12.8753 11.1111 13.3049 11.1111 13.7445C11.1155 14.0391 11.0613 14.3316 10.9516 14.6051C10.8419 14.8786 10.6789 15.1275 10.4721 15.3374C10.2653 15.5473 10.0189 15.714 9.74707 15.8277C9.47526 15.9415 9.18354 16 8.88889 16V15.9667Z"
                fill="black" />
            <path
                d="M35.5556 17.5889C35.5598 16.6004 35.2343 15.6386 34.6306 14.8558C34.0269 14.073 33.1794 13.5138 32.2222 13.2667V5.55557C32.2222 5.26088 32.1052 4.97827 31.8968 4.7699C31.6884 4.56152 31.4058 4.44446 31.1111 4.44446C30.8164 4.44446 30.5338 4.56152 30.3254 4.7699C30.1171 4.97827 30 5.26088 30 5.55557V13.2667C29.0287 13.4993 28.1641 14.0523 27.5456 14.8364C26.9271 15.6205 26.5907 16.5902 26.5907 17.5889C26.5907 18.5876 26.9271 19.5573 27.5456 20.3414C28.1641 21.1256 29.0287 21.6785 30 21.9111V34.4445C30 34.7391 30.1171 35.0218 30.3254 35.2301C30.5338 35.4385 30.8164 35.5556 31.1111 35.5556C31.4058 35.5556 31.6884 35.4385 31.8968 35.2301C32.1052 35.0218 32.2222 34.7391 32.2222 34.4445V21.9111C33.1794 21.664 34.0269 21.1048 34.6306 20.322C35.2343 19.5392 35.5598 18.5775 35.5556 17.5889ZM31.1111 19.8111C30.6716 19.8111 30.242 19.6808 29.8765 19.4366C29.5111 19.1924 29.2262 18.8454 29.058 18.4393C28.8899 18.0333 28.8458 17.5864 28.9316 17.1554C29.0173 16.7243 29.229 16.3283 29.5398 16.0176C29.8505 15.7068 30.2465 15.4951 30.6776 15.4094C31.1086 15.3236 31.5555 15.3676 31.9615 15.5358C32.3676 15.704 32.7146 15.9889 32.9588 16.3543C33.203 16.7197 33.3333 17.1494 33.3333 17.5889C33.3392 17.8844 33.2861 18.1782 33.1771 18.453C33.0681 18.7277 32.9053 18.978 32.6984 19.1891C32.4914 19.4001 32.2445 19.5678 31.9719 19.6823C31.6994 19.7967 31.4067 19.8556 31.1111 19.8556V19.8111Z"
                fill="black" />
            <path
                d="M24.4444 27.2222C24.4486 26.2337 24.1232 25.2719 23.5194 24.4891C22.9157 23.7063 22.0683 23.1471 21.1111 22.9V5.55557C21.1111 5.26088 20.994 4.97827 20.7857 4.7699C20.5773 4.56152 20.2947 4.44446 20 4.44446C19.7053 4.44446 19.4227 4.56152 19.2143 4.7699C19.006 4.97827 18.8889 5.26088 18.8889 5.55557V22.9C17.9176 23.1326 17.053 23.6856 16.4345 24.4697C15.816 25.2539 15.4796 26.2235 15.4796 27.2222C15.4796 28.221 15.816 29.1906 16.4345 29.9747C17.053 30.7589 17.9176 31.3119 18.8889 31.5445V34.4445C18.8889 34.7391 19.006 35.0218 19.2143 35.2301C19.4227 35.4385 19.7053 35.5556 20 35.5556C20.2947 35.5556 20.5773 35.4385 20.7857 35.2301C20.994 35.0218 21.1111 34.7391 21.1111 34.4445V31.5445C22.0683 31.2973 22.9157 30.7381 23.5194 29.9553C24.1232 29.1725 24.4486 28.2108 24.4444 27.2222ZM20 29.4445C19.5605 29.4445 19.1308 29.3141 18.7654 29.0699C18.4 28.8258 18.1151 28.4787 17.9469 28.0726C17.7787 27.6666 17.7347 27.2198 17.8205 26.7887C17.9062 26.3576 18.1179 25.9617 18.4287 25.6509C18.7394 25.3401 19.1354 25.1285 19.5665 25.0427C19.9975 24.957 20.4444 25.001 20.8504 25.1692C21.2565 25.3374 21.6035 25.6222 21.8477 25.9876C22.0919 26.3531 22.2222 26.7827 22.2222 27.2222C22.2266 27.5169 22.1724 27.8094 22.0627 28.0829C21.953 28.3564 21.79 28.6053 21.5833 28.8152C21.3765 29.0251 21.13 29.1917 20.8582 29.3055C20.5864 29.4193 20.2947 29.4778 20 29.4778V29.4445Z"
                fill="black" />
        </svg>
        <div class="setting-tab">
            <div class="sett">
                <div class="info">
                    <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <title>Speed</title>
                        <path
                            d="M15.625 1.04166H9.375V3.12499H15.625V1.04166ZM19.8229 7.69791L21.3021 6.21874C20.8542 5.68749 20.3646 5.18749 19.8333 4.74999L18.3542 6.22916C16.6951 4.89408 14.6295 4.16633 12.5 4.16666C7.32292 4.16666 3.125 8.36457 3.125 13.5417C3.125 18.7187 7.3125 22.9167 12.5 22.9167C14.2649 22.9176 15.9942 22.42 17.4887 21.4812C18.9832 20.5424 20.1821 19.2005 20.9473 17.6101C21.7126 16.0198 22.013 14.2456 21.8141 12.4919C21.6152 10.7383 20.925 9.07646 19.8229 7.69791ZM12.5 20.8333C8.46875 20.8333 5.20833 17.5729 5.20833 13.5417C5.20833 9.51041 8.46875 6.24999 12.5 6.24999C16.5312 6.24999 19.7917 9.51041 19.7917 13.5417C19.7917 17.5729 16.5312 20.8333 12.5 20.8333ZM12.1667 15.625H6.61458C6.90979 16.4597 7.37918 17.222 7.9916 17.8614C8.60402 18.5007 9.34546 19.0025 10.1667 19.3333L10.0521 19.2708L12.1667 15.625ZM18.3854 11.4583C18.0946 10.6351 17.6348 9.88181 17.0357 9.24677C16.4365 8.61173 15.7112 8.10899 14.9062 7.77082L12.7708 11.4583H18.3854ZM11.0521 19.6146C11.5208 19.7292 12 19.7917 12.5 19.7917C13.8958 19.7917 15.1771 19.3229 16.2187 18.5521L14.0208 14.4896L11.0521 19.6146ZM7.86458 9.36457C6.8259 10.5078 6.25029 11.997 6.25 13.5417C6.25 13.8958 6.29167 14.2396 6.34375 14.5833H11.2604L7.86458 9.36457ZM17.0208 17.8437C18.133 16.688 18.753 15.1456 18.75 13.5417C18.75 13.1875 18.7083 12.8437 18.6562 12.5H14.1354L17.0208 17.8437ZM13.8854 7.44791C13.4375 7.35416 12.9792 7.29166 12.5 7.29166C11.0417 7.29166 9.69792 7.80207 8.63542 8.63541L11.0521 12.3437L13.8854 7.44791Z"
                            fill="black" />
                    </svg>
                    <span>Speed</span>
                </div>
                <input type="range" id="speed-slider" class="slider" min="2" max="30" value="10" step="1">
            </div>
            <div class="sett">
                <div class="info">
                    <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <title>Resize Box</title>
                        <path
                            d="M2.50011 1.25253C2.16857 1.25253 1.85062 1.38423 1.61619 1.61866C1.38176 1.85309 1.25005 2.17105 1.25005 2.50258C1.25005 2.83412 1.38176 3.15207 1.61619 3.38651C1.85062 3.62094 2.16857 3.75264 2.50011 3.75264C2.83164 3.75264 3.1496 3.62094 3.38403 3.38651C3.61846 3.15207 3.75016 2.83412 3.75016 2.50258C3.75016 2.17105 3.61846 1.85309 3.38403 1.61866C3.1496 1.38423 2.83164 1.25253 2.50011 1.25253ZM1.22235e-06 2.50258C-0.000600623 1.89364 0.221063 1.30542 0.623387 0.848309C1.02571 0.391203 1.58103 0.0966472 2.18512 0.0199276C2.78921 -0.0567919 3.40054 0.0895998 3.90435 0.431626C4.40816 0.773652 4.76983 1.2878 4.92146 1.87756H15.0794C15.1897 1.45087 15.4109 1.06093 15.7205 0.747258C16.03 0.433581 16.417 0.207313 16.8422 0.091382C17.2674 -0.0245489 17.7157 -0.0260223 18.1417 0.0871109C18.5676 0.200244 18.9561 0.423963 19.2677 0.735598C19.5794 1.04723 19.8031 1.43571 19.9162 1.86166C20.0294 2.28761 20.0279 2.7359 19.912 3.16109C19.796 3.58629 19.5698 3.97329 19.2561 4.28287C18.9424 4.59245 18.5525 4.81361 18.1258 4.92394V15.0819C18.5525 15.1922 18.9424 15.4134 19.2561 15.7229C19.5698 16.0325 19.796 16.4195 19.912 16.8447C20.0279 17.2699 20.0294 17.7182 19.9162 18.1442C19.8031 18.5701 19.5794 18.9586 19.2677 19.2702C18.9561 19.5818 18.5676 19.8056 18.1417 19.9187C17.7157 20.0318 17.2674 20.0304 16.8422 19.9144C16.417 19.7985 16.03 19.5722 15.7205 19.2586C15.4109 18.9449 15.1897 18.5549 15.0794 18.1283H4.92146C4.81113 18.5549 4.58997 18.9449 4.28039 19.2586C3.97081 19.5722 3.58382 19.7985 3.15862 19.9144C2.73342 20.0304 2.28513 20.0318 1.85918 19.9187C1.43323 19.8056 1.04476 19.5818 0.733122 19.2702C0.421487 18.9586 0.197768 18.5701 0.084635 18.1442C-0.0284982 17.7182 -0.0270247 17.2699 0.0889062 16.8447C0.204837 16.4195 0.431105 16.0325 0.744782 15.7229C1.05846 15.4134 1.4484 15.1922 1.87508 15.0819V4.92394C1.33831 4.78534 0.862832 4.47228 0.523405 4.03397C0.183979 3.59565 -0.000139674 3.05696 1.22235e-06 2.50258ZM3.12513 4.92394V15.0819C4.00392 15.3069 4.6952 15.9994 4.92146 16.8782H15.0794C15.1915 16.4458 15.4171 16.0513 15.733 15.7354C16.0488 15.4196 16.4434 15.194 16.8757 15.0819V4.92394C16.4434 4.81185 16.0488 4.5862 15.733 4.27036C15.4171 3.95452 15.1915 3.55998 15.0794 3.12761H4.92146C4.80938 3.55998 4.58373 3.95452 4.26789 4.27036C3.95205 4.5862 3.55751 4.81185 3.12513 4.92394ZM17.5008 1.25253C17.1692 1.25253 16.8513 1.38423 16.6168 1.61866C16.3824 1.85309 16.2507 2.17105 16.2507 2.50258C16.2507 2.83412 16.3824 3.15207 16.6168 3.38651C16.8513 3.62094 17.1692 3.75264 17.5008 3.75264C17.8323 3.75264 18.1502 3.62094 18.3847 3.38651C18.6191 3.15207 18.7508 2.83412 18.7508 2.50258C18.7508 2.17105 18.6191 1.85309 18.3847 1.61866C18.1502 1.38423 17.8323 1.25253 17.5008 1.25253ZM2.50011 16.2532C2.16857 16.2532 1.85062 16.3849 1.61619 16.6193C1.38176 16.8537 1.25005 17.1717 1.25005 17.5032C1.25005 17.8348 1.38176 18.1527 1.61619 18.3871C1.85062 18.6216 2.16857 18.7533 2.50011 18.7533C2.83164 18.7533 3.1496 18.6216 3.38403 18.3871C3.61846 18.1527 3.75016 17.8348 3.75016 17.5032C3.75016 17.1717 3.61846 16.8537 3.38403 16.6193C3.1496 16.3849 2.83164 16.2532 2.50011 16.2532ZM17.5008 16.2532C17.1692 16.2532 16.8513 16.3849 16.6168 16.6193C16.3824 16.8537 16.2507 17.1717 16.2507 17.5032C16.2507 17.8348 16.3824 18.1527 16.6168 18.3871C16.8513 18.6216 17.1692 18.7533 17.5008 18.7533C17.8323 18.7533 18.1502 18.6216 18.3847 18.3871C18.6191 18.1527 18.7508 17.8348 18.7508 17.5032C18.7508 17.1717 18.6191 16.8537 18.3847 16.6193C18.1502 16.3849 17.8323 16.2532 17.5008 16.2532Z"
                            fill="black" />
                    </svg>
                    <span>Box-size</span>
                </div>
                <input type="range" step="1" id="box-slider" class="slider" min="10" max="24" value="16">
            </div>
        </div>
    </div>

    <!-- scripts -->
    <script src="./../assets/js/gameOfLife_js/formations.js"></script>
    <script src="./../assets/js/gameOfLife_js/genericFunc.js"></script>
    <script src="./../assets/js/gameOfLife_js/gameOfLife.js"></script>
</body>

</html>